<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <h1>Alerts</h1>
                <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
                <p>A default gray alert wouldn't make too much sense, so you're required to specify a type with the severity attribute. Choose from success, info, warning, or danger.</p>
                <p>The <code>title</code> attribute is optional and will add a title to the Alert.</p>
                <p>The b:alert tag is a container so you are free to use the markup you prefer for the message:</p>
                <b:panel>
                    <f:facet name="heading"><b>EXAMPLE</b></f:facet>
                    <b:alert severity="success"><strong>Well done!</strong> You successfully read this important alert message.</b:alert>
                    <b:alert severity="info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important. </b:alert>
                    <b:alert severity="warning"><strong>Warning!</strong> Best check yo self, you're not looking too good. </b:alert>
                    <b:alert severity="danger"><strong>Oh snap!</strong> Change a few things up and try submitting again. </b:alert>
                    <b:alert severity="info" title="Heads up!">This alert needs your attention, but it's not super important. </b:alert>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>

                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 1">
                            <![CDATA[
                            <b:alert severity="success"><strong>Well done!</strong> You successfully read this important alert message.</b:alert>
                            <b:alert severity="info"><strong>Heads up!</strong> This alert needs your attention, but it's not super important. </b:alert>
                            <b:alert severity="warning"><strong>Warning!</strong> Best check yo self, you're not looking too good. </b:alert>
                            <b:alert severity="danger"><strong>Oh snap!</strong> Change a few things up and try submitting again. </b:alert>
                            
                            <b:alert severity="info" title="Heads up!">This alert needs your attention, but it's not super important. </b:alert>
                            ]]></script>
                    </f:facet>
                </b:panel>
                <br/>
                <h4>Dismissable alerts</h4>
                <p>You can make Alerts dismissable adding <code>closable="true"</code> :</p>
                <b:alert severity="warning" title="Warning Title" closable="true"><strong>Warning!</strong> Best check yo self, you're not looking too good. </b:alert>
                <p>this message will close when you click on the cross on the left.</p>
                <br/><br/><br/>
                <script type="text/javascript">
                    SyntaxHighlighter.all();
                </script>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
